<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>增删改</title>
</head>
<body>
    <!-- 
        移除节点
       父节点.removeChild(子节点)
     -->
     <div class="box">
         <p>我是一个段落</p>
     </div>
     <button>移除节点</button>
     <script>
        //1.查
       var box= document.getElementsByClassName('box');
       console.log(box);//HTMLCollection [div.box]
       console.log(box[0]);// div

      var p= box[0].getElementsByTagName('p')[0];
      console.log(p);// p

      var btn= document.getElementsByTagName('button')[0];
      console.log(btn);
      //2.加事件

      btn.onclick=function(){
        // 把p节点移除
        box[0].removeChild(p)

      }

     </script>

      <ul>
        <li>我是li1</li>
        <li>我是li2</li>
        <li>我是li3</li>
      </ul>
     <script>
        // 克隆节点
        //1. 节点对象.cloneNode(true)   ;
        // true    连同后代元素一块克隆     没有true  只克隆 当前节点，不包含后代元素

        //2.克隆完后，要进行添加   追加  插入

        //1.查
      var ul=  document.querySelector('ul');

      var ul1=  ul.cloneNode(true);
      console.log(ul1);

        document.body.appendChild(ul1)
     </script>

      <div id="box1">
          <p>我是段落<span>我是span</span></p>
      </div>
     <script>
        // 替换节点
        // 父节点.replaceChild(新节点，旧节点)

        //1.创建新节点
       var h2=  document.createElement('h2');
         h2.innerHTML='我是标题2<a href="https://www.baidu.com">百度</a>';

         console.log(h2);

         //2.找到页面中存在的节点
        var p1= document.querySelector('#box1>p');
        //3.替换
         var box1= document.querySelector('#box1');
         box1.replaceChild(h2,p1);

     </script>
</body>
</html>